<template>
  <div class="box">
    <div class="content">
      <!-- 二楼表格 -->
      <div class="f2">
        <div class="title">
          <h3 :class="{ active: row == 1 }" @click="row1">授信项目</h3>
          <h3 :class="{ active: row == 2 }" @click="row2">用信项目</h3>
        </div>

        <!-- 跨境金融 -->
        <div v-show="row == 1">
          <!-- 搜索栏 -->
          <div class="user-search">
            <div>
              <span>项目状态</span>
              <el-select v-model="userState" placeholder="请选择项目状态">
                <el-option key="8918" label="全部" value="8918"></el-option>
                <el-option key="1" label="未反馈" value="未反馈"></el-option>
                <el-option key="2" label="已反馈" value="已反馈"></el-option>
                <el-option key="3" label="审批中" value="审批中" />
                <el-option key="4" label="审批通过" value="审批通过" />
                <el-option key="5" label="审批拒绝" value="审批拒绝" />
                <el-option key="9" label="保单已开立" value="保单已开立" />
                <el-option key="6" label="正常结项" value="正常结项" />
                <el-option key="7" label="逾期结项" value="逾期结项" />
                <el-option key="8" label="已取消" value="已取消" />
              </el-select>
            </div>
            <div style="display: flex; align-items: center">
              <span style="width: 90px">产品名称</span>
              <el-input
                v-model="proceedsId"
                placeholder="请输入产品名称"
              ></el-input>
            </div>
          </div>
          <div class="null" v-if="!userData">
            <img src="@/assets/PC/金融服务/暂无记录.png" alt="" />
            <h3>暂无数据记录</h3>
          </div>
          <!-- 表格+分页器 -->
          <!-- <transition :name="transitionName" mode="out-in"> -->
          <div class="table" v-if="userData" v-loading="loading">
            <el-table
              :data="userData"
              border
              highlight-current-row
              stripe
              :header-cell-style="{
                background: '#f3f3f3',
                color: '#4D4D4D',
              }"
            >
              >
              <el-table-column
                prop="num"
                label="序号"
                fixed
                width="70"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="oderid"
                label="项目编号"
                min-width="150"
                align="center"
                fixed
              >
              </el-table-column>
              <el-table-column
                prop="productname"
                label="产品名称"
                min-width="260"
                align="center"
              >
              </el-table-column>

              <el-table-column
                prop="amount"
                label="授信金额（元）"
                min-width="150"
                align="right"
              >
                <template #default="scope">
                  <p
                    v-if="
                      userData[scope.$index].productname == '商票贴现融资' ||
                      userData[scope.$index].productname == '商票质押融资' ||
                      userData[scope.$index].productname == '银票贴现融资' ||
                      userData[scope.$index].productname == '银票质押融资' ||
                      userData[scope.$index].productname == '财票贴现融资' ||
                      userData[scope.$index].productname == '财票质押融资'
                    "
                  >
                    {{ getArea(scope.row.faceamount) }}
                  </p>
                  <p v-else>{{ getArea(scope.row.amount) }}</p>
                </template>
              </el-table-column>

              <el-table-column
                prop="inputdate"
                label="申请日期"
                min-width="180"
                align="center"
              >
                <template #default="scope">{{
                  getDate(scope.row.inputdate)
                }}</template>
              </el-table-column>
              <el-table-column
                prop="status"
                label="项目状态"
                min-width="150"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="操作"
                min-width="240"
                align="center"
                fixed="right"
              >
                <template #default="scope">
                  <span
                    v-if="
                      userData[scope.$index].income === 'PCEnt' &&
                      (userData[scope.$index].productname == '关税保函' ||
                        userData[scope.$index].productname == '关税E保' ||
                        userData[scope.$index].productname == '关税保证保险' ||
                        userData[scope.$index].productname ==
                          '关税履约保证保险') &&
                      userData[scope.$index].status == '已反馈'
                    "
                    class="span"
                    v-bind:class="{
                      nactive:
                        (userData[scope.$index].productname == '关税保函' ||
                          userData[scope.$index].productname == '关税E保' ||
                          userData[scope.$index].productname ==
                            '关税保证保险' ||
                          userData[scope.$index].productname ==
                            '关税履约保证保险') &&
                        userData[scope.$index].status === '已反馈' &&
                        userData[scope.$index].statuss === '200' &&
                        (userData[scope.$index].kjapplyid === null ||
                          userData[scope.$index].kjapplyid === 'null'),
                    }"
                    @click="apply(scope.$index, userData)"
                    type="text"
                    size="small"
                  >
                    申请
                  </span>
                  <span
                    class="span1"
                    @click="goDetails(scope.$index, userData)"
                    type="text"
                    size="small"
                  >
                    查看
                  </span>
                  <span
                    v-show="
                      (userData[scope.$index].productname === '关税保函' ||
                        userData[scope.$index].productname === '关税E保') &&
                      userData[scope.$index].status == '审批通过'
                    "
                    @click="yxApply(scope.$index, userData)"
                    class="span1"
                    type="text"
                    size="small"
                  >
                    用信申请
                  </span>
                  <span
                    v-show="
                      (userData[scope.$index].productname === '关税保函' ||
                        userData[scope.$index].productname === '关税E保' ||
                        userData[scope.$index].productname === '关税保证保险' ||
                        userData[scope.$index].productname ===
                          '关税履约保证保险' ||
                        userData[scope.$index].productname === '出口保理融资' ||
                        userData[scope.$index].producttypes == '融资类' ||
                        userData[scope.$index].producttypes == '非融资类' ||
                        userData[scope.$index].productname == '产业数字贷') &&
                      (userData[scope.$index].status === '未反馈' ||
                        userData[scope.$index].status === '审批中')
                    "
                    class="span1"
                    @click="cancel(scope.$index, userData, 'sx')"
                    type="text"
                    size="small"
                  >
                    取消订单
                  </span>
                  <span
                    v-show="
                      (userData[scope.$index].productname === '关税保证保险' ||
                        userData[scope.$index].productname ===
                          '关税履约保证保险' ||
                        userData[scope.$index].productname === '出口保理融资' ||
                        userData[scope.$index].productname === '关税E保' ||
                        userData[scope.$index].productname === '关税保函') &&
                      userData[scope.$index].status === '审批通过'
                    "
                    class="span1"
                    @click="jieXiangOpen(scope.$index, userData)"
                    type="text"
                    size="small"
                    >提交结项</span
                  >
                  <span
                    v-show="
                      (userData[scope.$index].status === '正常结项' ||
                        userData[scope.$index].status === '逾期结项' ||
                        userData[scope.$index].status === '已反馈') &&
                      !userData[scope.$index].evalute
                    "
                    class="span1"
                    @click="evaluate(scope.$index, userData)"
                    type="text"
                    size="small"
                  >
                    评价
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- </transition> -->
          <!-- 分页器 -->
          <div class="pagination" v-if="userData">
            <el-pagination
              next-text="下一页"
              prev-text="上一页"
              background
              layout="prev, pager, next"
              @next-click="nextClick()"
              @prev-click="prevClick()"
              @current-change="handlePageChange"
              :total="pages * 10"
            ></el-pagination>
            <!-- <span>共{{ pages }}页</span> -->
          </div>
        </div>
        <!-- 票据金融 -->
        <div v-show="row == 2">
          <div class="user-search">
            <div>
              <span>项目状态</span>
              <el-select
                v-model="applyExamineStates"
                placeholder="请选择项目状态"
              >
                <el-option key="8918" label="全部" value="8918"></el-option>
                <el-option key="1" label="审批中" value="审批中"></el-option>
                <el-option
                  key="2"
                  label="审批通过"
                  value="审批通过"
                ></el-option>
                <el-option
                  key="3"
                  label="审批拒绝"
                  value="审批拒绝"
                ></el-option>

                <!-- <el-option
                  key="3"
                  label="放款拒绝"
                  value="放款拒绝"
                ></el-option> -->

                <el-option
                  key="4"
                  label="正常结清"
                  value="正常结清"
                ></el-option>
                <el-option
                  key="5"
                  label="逾期结清"
                  value="逾期结清"
                ></el-option>
                <!-- <el-option key="6" label="已逾期" value="已逾期"></el-option>
                <el-option key="7" label="已还款" value="已还款"></el-option> -->
              </el-select>
            </div>
            <div style="display: flex; align-items: center">
              <span style="width: 90px">产品名称</span>
              <el-input
                v-model="applyProducttype"
                placeholder="请输入产品名称"
              ></el-input>
            </div>
          </div>
          <div class="null" v-if="!applyData">
            <img src="@/assets/PC/金融服务/暂无记录.png" alt="" />
            <h3>暂无数据记录</h3>
          </div>
          <!-- 表格+分页器 -->
          <div class="table" v-if="applyData" v-loading="loading">
            <el-table
              v-loading="loading"
              :data="applyData"
              border
              highlight-current-row
              stripe
              :header-cell-style="{
                background: '#f3f3f3',
                color: '#4D4D4D',
              }"
            >
              <el-table-column
                prop="num"
                label="序号"
                fixed
                width="70"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="putoutid"
                label="项目编号"
                min-width="6%"
                fixed
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="productname"
                label="产品名称"
                min-width="4%"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="loanamount"
                label="审批金额（元）"
                min-width="5%"
                align="right"
              >
                <template #default="scope">
                  {{ getArea(scope.row.loanamount) }}
                </template>
              </el-table-column>
              <el-table-column
                prop="statuss"
                label="申请日期"
                min-width="5%"
                align="center"
              >
                <template #default="scope">{{
                  getDate(scope.row.inputdate)
                }}</template>
              </el-table-column>
              <el-table-column
                prop="statuss"
                label="项目状态"
                min-width="4%"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="操作"
                min-width="5%"
                align="center"
                fixed="right"
              >
                <template #default="scope">
                  <span
                    class="span"
                    v-bind:class="{
                      nactive: true,
                    }"
                    @click="goYxApplyForDetails(scope.$index, applyData)"
                    type="text"
                    size="small"
                  >
                    查看
                  </span>
                  <span
                    v-show="applyData[scope.$index].statuss === '审批中'"
                    class="span1"
                    @click="cancel(scope.$index, applyData, 'yx')"
                    type="text"
                    size="small"
                  >
                    取消订单
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="pagination" v-if="applyData">
            <el-pagination
              next-text="下一页"
              prev-text="上一页"
              background
              layout="prev, pager, next"
              @next-click="nextClicks()"
              @prev-click="prevClicks()"
              :total="pagess * 10"
              @current-change="handlePageChanges"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- 取消订单弹框 -->
    <el-dialog
      class="aaaa"
      title="确认是否取消订单？"
      v-model="dialogVisible"
      :close-on-click-modal="false"
      width="30%"
    >
      <!-- 内容区域 -->
      <div class="dialog-center" style="height: 35px">
        <el-form
          :model="form"
          :rules="rules"
          ref="ruleForm"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item label="取消原因" prop="cancelremark">
            <el-input v-model="form.cancelremark" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button
            @click="(dialogVisible = false), (form.cancelremark = '')"
            class="dialog-footer-bnt btn2"
            >取 消</el-button
          >
          <el-button
            type="primary"
            @click="affirm"
            class="dialog-footer-bnt btn2"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
    <el-dialog
      title="评价订单"
      v-model="evaluateVisible"
      class="bbbb"
      width="40%"
    >
      <div class="dialog-center">
        <div class="evaluate">
          <div class="evaluateList">
            <span style="width: 90px">描述相符：</span>
            <el-rate v-model="evaluateValue1" />
          </div>
          <div class="evaluateList">
            <span style="width: 90px">服务态度：</span>
            <el-rate v-model="evaluateValue2" />
          </div>
          <div class="evaluateList">
            <span style="width: 90px">金融服务：</span>
            <el-rate v-model="evaluateValue3" />
          </div>
          <div
            class="evaluateList"
            style="margin-top: 25px; align-items: flex-start"
          >
            <span style="width: 90px">备注信息：</span>
            <el-input
              style="min-width: 180px; max-width: 450px"
              v-model="textarea"
              :rows="3"
              type="textarea"
              placeholder="请输入备注信息"
            />
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer" style="margin-top: 35px">
          <el-button
            @click="closeEvaluateVisible"
            class="dialog-footer-bnt btn2"
            >取 消</el-button
          >
          <el-button
            type="primary"
            @click="submitEvaluate"
            class="dialog-footer-bnt btn2"
            >提交</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  findkjapply,
  selectallProduct,
  base,
  myPostFetch,
  site,
  myBases,
} from "@/utils";
import { AreaDispose, dateDispose } from "@/utils/filters.js";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      productcode: "",
      evaluateVisible: false,
      textarea: "",
      evaluateValue1: 0,
      evaluateValue2: 0,
      evaluateValue3: 0,
      evaluateApplyid: "",
      producttype: "",
      form: {
        cancelremark: "",
        applyid: "",
        putoutid: "",
        row: "",
      },
      rules: {
        cancelremark: [{ required: true, message: " ", trigger: "blur" }],
      },
      dialogVisible: false,
      cur: 1,
      applyData: null,
      row: 1,
      loading: true,
      base: "", // 服务器跟地址
      userState: "", //项目状态
      productName: "", //产品名称
      productState: "8918", //产品状态
      productId: "8918", //产品id
      pageNum: 1, //当前页数
      pageSize: 10, //每页条数
      pages: 1,
      transitionName: "slide-left",
      //我的申请
      applyProducttype: "", //产品类型
      applyProducttypes: "", //产品类型
      applyExamineStates: "", //审批状态
      applyExamineState: "8918", //审批状态
      pageNums: 1, //我的申请当前页数
      pageSizes: 10, //我的申请每页条数
      pagess: 1, //我的申请总页数
      // 表格数据
      userData: null,
      proceedsId: "",
    };
  },

  watch: {
    // 跨境金融
    // 监听产品名称变化
    proceedsId() {
      this.pageNum = 1;
      this.pages = 1;
      this.productId = this.proceedsId;
      this.findkjapply();
    },
    // 监听项目状态变化
    userState() {
      this.pageNum = 1;
      this.pages = 1;
      this.productState = this.userState;
      this.findkjapply();
    },
    // 监听page的变化
    pageNum() {
      this.findkjapply();
    },
    // 商票金融
    //我的申请
    // 监听产品类型变化
    applyProducttype() {
      this.pageNums = 1;
      this.pagess = 1;
      this.applyProducttypes = this.applyProducttype;
      this.myApplyData();
    },
    // 监听审批状态变化
    applyExamineStates() {
      this.pageNum = 1;
      this.pages = 1;
      this.applyExamineState = this.applyExamineStates;
      this.myApplyData();
    },
    // 监听page的变化
    pageNums() {
      this.myApplyData();
    },
  },
  mounted() {
    let row = sessionStorage.getItem("row");
    row ? (this.row = row) : (this.row = 1);
    this.findkjapply();
    this.myApplyData();
    this.base = base;
  },
  methods: {
    // 评价弹窗
    evaluate(index, item) {
      this.productcode = item[index].productcode;
      this.evaluateVisible = true;
      this.evaluateApplyid = item[index].id;
    },
    // 提交评价
    async submitEvaluate() {
      // if (
      //   this.evaluateValue1 == "" ||
      //   this.evaluateValue2 ||
      //   this.evaluateValue3 ||
      //   this.textarea
      // )
      //   return;
      let url = "/api/hubeibusienss/businessevalute";
      let params = {
        describe: this.evaluateValue1,
        attitude: this.evaluateValue2,
        financial: this.evaluateValue3,
        remark: this.textarea,
        applyid: this.evaluateApplyid,
        productcode: this.productcode,
      };
      let data = await myPostFetch(url, params);
      this.evaluateVisible = false;
      this.evaluateValue1 = "";
      this.evaluateValue2 = "";
      this.evaluateValue3 = "";
      this.textarea = "";
      this.findkjapply();
    },
    // 关闭评价弹窗
    closeEvaluateVisible() {
      this.evaluateVisible = false;
      this.evaluateValue1 = "";
      this.evaluateValue2 = "";
      this.evaluateValue3 = "";
      this.textarea = "";
    },

    // 金额处理
    getArea(value) {
      return AreaDispose(value);
    },
    getDate(value) {
      return dateDispose(value);
    },
    // 切换
    row1() {
      this.row = 1;
      this.findkjapply();
      sessionStorage.setItem("row", 1);
    },
    row2() {
      this.row = 2;
      this.myApplyData();
      sessionStorage.setItem("row", 2);
    },
    // 点击下一页
    nextClick() {
      this.pageNum += 1;
      this.findkjapply();
    },
    // 点击上一页
    prevClick() {
      this.pageNum -= 1;
      this.findkjapply();
    },
    // 点击数字改变page的值
    handlePageChange(currentPage) {
      this.pageNum = currentPage;
      this.findkjapply();
    },
    // 我的申请筛选
    // 我的申请 点击下一页
    nextClicks() {
      this.pageNums += 1;
      this.myApplyData();
    },
    // 我的申请 点击上一页
    prevClicks() {
      this.pageNums -= 1;
      this.myApplyData();
    },
    // 我的申请 点击数字改变page的值
    handlePageChanges(currentPage) {
      this.pageNums = currentPage;
      this.myApplyData();
    },
    //我的申请 搜索企业名称
    applySearch() {
      this.pages = 1;
      this.pagess = 1;
      this.myApplyData();
    },
    // 我的用信
    async myApplyData() {
      this.loading = true;
      let url = "/api/hubeibusienss/findbussx";
      let params = {
        pageNum: this.pageNums,
        pageSize: this.pageSizes,
        productname: this.applyProducttypes,
        status: this.applyExamineState,
      };
      let data = await myPostFetch(url, params);
      if (data.data.list.length != 0) {
        this.applyData = data.data.list;
        setTimeout(() => {
          this.loading = false;
        }, 800);
        for (let i = 0; i < this.applyData.length; i++) {
          this.applyData[i].num = (this.pageNums - 1) * 10 + i + 1;
        }
        this.pagess = data.data.pages;
        return data;
      } else {
        this.applyData = null;
      }
    },

    // 我的授信项目管理列表
    async findkjapply() {
      this.loading = true;
      let data = await findkjapply(
        this.pageNum,
        this.pageSize,
        this.productState,
        this.productId
      );
      if (data.data.list.length != 0) {
        this.userData = data.data.list;
        setTimeout(() => {
          this.loading = false;
        }, 800);
        for (let i = 0; i < this.userData.length; i++) {
          this.userData[i].num = (this.pageNum - 1) * 10 + i + 1;
        }
        this.pages = data.data.pages;
        return data;
      } else {
        this.userData = null;
      }
    },
    // 点击查看跳转项目详情
    goDetails(index, row) {
      console.log(row[index]);
      let id = row[index].id;
      let productcode = row[index].productcode;
      let productname = row[index].productname;
      let status = row[index].status;
      let income = row[index].income;
      let producttypes = row[index].producttypes;
      let producttype = row[index].producttype;

      let spid = row[index].spid;
      localStorage.setItem("id", id);
      localStorage.setItem("productcode", productcode);
      let strArr = [];
      for (let i = 0; i < 6; i++) {
        strArr.push(productcode[i]);
      }
      let str = strArr.join("");
      // 关税保函预申请详情
      if (
        (productname == "关税保函" ||
          productname == "关税保证保险" ||
          productname == "关税履约保证保险") &&
        income == "PCEnt"
      ) {
        this.$router.push(`/projectBorderDetailsGsbh?id=${id}`);
      } else if (
        // 关税E宝预申请详情
        productname == "关税E保" &&
        income == "PCEnt"
      ) {
        this.$router.push(`/projectBorderDetails?id=${id}`);
      } else if (
        // 关税保函正式申请详情
        productname == "关税保函" &&
        income == "YYSYS"
      ) {
        this.$router.push(`/regularProjectGsbh?id=${id}`);
      } else if (
        // 关税E宝正式申请详情
        productname == "关税E保" &&
        income == "YYSYS"
      ) {
        this.$router.push(`/regularProjectGseb?id=${id}`);
      } else if (
        // 关税保证保险正式申请详情
        productname == "关税保证保险" &&
        income == "YYSYS"
      ) {
        this.$router.push(`/projectGuaranteeDetails?id=${id}`);
      } else if (productname === "出口保理融资" && income == "YYSYS") {
        this.$router.push(`/projectBorderDetailsCkblrz?id=${id}`);
      } else if (productname === "关税履约保证保险" && income == "YYSYS") {
        this.$router.push(`/projectGuaranteeGslybzbx?id=${id}`);
      } // status为审批中，producttype为贴现跳转至商票贴现
      else if (
        (status == "审批中" || status == "审批拒绝") &&
        (producttype == "商票贴现" ||
          producttype == "银票贴现" ||
          producttype == "财票贴现" ||
          producttype == "财票质押" ||
          producttype == "银票质押")
      ) {
        localStorage.setItem("id", id);
        localStorage.setItem("spid", spid);
        this.$router.push(`/projectDiscountDetails`);
      } else if (
        (status == "审批通过" ||
          status == "待放款" ||
          status == "已取消" ||
          status == "已放款" ||
          status == "已逾期" ||
          status == "正常结项" ||
          status == "逾期结项") &&
        (producttype == "商票贴现" ||
          producttype == "银票贴现" ||
          producttype == "财票贴现" ||
          producttype == "财票质押" ||
          producttype == "银票质押")
      ) {
        // status为审批通过，producttype为贴现跳转至商票贴现
        localStorage.setItem("id", id);
        localStorage.setItem("spid", spid);
        this.$router.push(`/projectApproveEasypasteDetails`);
      } else if (
        (status == "审批中" || status == "审批拒绝") &&
        producttype == "商票质押"
      ) {
        // status为审批中，producttype为质押跳转至商票质押
        localStorage.setItem("id", id);
        localStorage.setItem("spid", spid);
        this.$router.push(`/projectPledgeApproveDetalis`);
      } else if (
        (status == "审批通过" ||
          status == "待放款" ||
          status == "已取消" ||
          status == "已放款" ||
          status == "已逾期" ||
          status == "正常结项" ||
          status == "逾期结项") &&
        producttype == "商票质押"
      ) {
        // status为审批通过，producttype为质押跳转至商票质押
        localStorage.setItem("id", id);
        localStorage.setItem("spid", spid);
        this.$router.push(`/projectApprovePledgeDetails`);
      } else if (producttypes == "融资类") {
        this.$router.push(`/FinancingTypeDetails?id=${id}`);
      } else if (producttypes == "非融资类") {
        this.$router.push(`/NotFinancingTypeDetails?id=${id}`);
      } else if (str == "SCF006") {
        this.$router.push(`/CyShuJuDaiDetails?id=${id}`);
      }
    },
    // 用信申请
    yxApply(index, row) {
      let id = row[index].id;
      let productcode = row[index].productcode;
      let productid = row[index].productid;
      let productname = row[index].productname;
      localStorage.setItem("productcode", productcode);
      localStorage.setItem("productcodeId", productid);
      localStorage.setItem("productname", productname);
      localStorage.setItem("zhapplyid", id);
      this.$router.push("/yxApply");
    },
    // 跳转用信项目详情
    goYxApplyForDetails(index, data) {
      let putoutid = data[index].putoutid;
      let applyid = data[index].applyid;
      localStorage.setItem("id", applyid);
      localStorage.setItem("putoutid", putoutid);

      this.$router.push(`/yxApplyDetails`);
    },
    // 点击申请跳转至确认授信页面
    apply(index, row) {
      let id = row[index].id;
      let productcode = row[index].productcode;
      let kjapplyid = row[index].kjapplyid;
      let productid = row[index].productid;
      let productname = row[index].productname;
      let status = row[index].status;
      if (kjapplyid == null && status == "已反馈") {
        localStorage.setItem("productcode", productcode);
        localStorage.setItem("productcodeId", productid);
        localStorage.setItem("productname", productname);
        localStorage.setItem("zhapplyid", id);
        if (productname === "关税保函") {
          // const a = document.createElement("a"); // 动态创建a标签，防止下载大文件时，用户没看到下载提示连续点击
          // a.href = `${site}/finance_subordinate?ssoUrl=${myBases}/creditExtension?applyid=${id}&productcode=${productcode}`;
          // a.target = "_black";
          // a.click();
          this.$router.push("/gsbhApplication");
        } else if (productname === "关税E保") {
          // const a = document.createElement("a"); // 动态创建a标签，防止下载大文件时，用户没看到下载提示连续点击
          // a.href = `${site}/finance_subordinate?ssoUrl=${myBases}/creditExtension?applyid=${id}&productcode=${productcode}`;
          // a.target = "_black";
          // a.click();
          this.$router.push("/gsebzsApply1");
        } else if (productname === "关税保证保险") {
          // const a = document.createElement("a"); // 动态创建a标签，防止下载大文件时，用户没看到下载提示连续点击
          // a.href = `${site}/finance_subordinate?ssoUrl=${myBases}/sxbCreditExtension?applyid=${id}&productcode=${productcode}`;
          // a.target = "_black";
          // a.click();
          this.$router.push("/gsbzbxApplication");
        } else if (productname === "关税履约保证保险") {
          // const a = document.createElement("a"); // 动态创建a标签，防止下载大文件时，用户没看到下载提示连续点击
          // a.href = `${site}/finance_subordinate?ssoUrl=${myBases}/sxbCreditExtension?applyid=${id}&productcode=${productcode}`;
          // a.target = "_black";
          // a.click();
          this.$router.push("/gslybzbxApplication");
        }
        this.setTim();
      }
      return;
    },
    // 取消订单
    cancel(index, data, row) {
      this.producttype = data[index].producttype;
      this.form.applyid = data[index].id;
      this.form.row = row;
      this.form.putoutid = data[index].putoutid;
      this.dialogVisible = true;
    },
    // 取消订单弹窗确认按钮
    async affirm() {
      let { cancelremark, row, putoutid, applyid } = this.form;
      if (cancelremark == "") return ElMessage.error("请输入内容");
      let url = "";
      let params = null;
      if (row == "sx") {
        if (
          this.producttype == "商票贴现" ||
          this.producttype == "商票质押" ||
          this.producttype == "银票贴现"
        ) {
          url = "/api/hubeibusienss/SPcancelbusienss";
        } else {
          url = "/api/hubeibusienss/cancelbusienss";
        }
        params = {
          applyid: applyid,
          cancelremark: cancelremark,
        };
      } else {
        url = "/api/hubeibusienss/cancelbusienssYX";
        params = {
          putoutid: putoutid,
          cancelremark: cancelremark,
        };
      }

      let res = await myPostFetch(url, params);
      if (res.msg == "ok") {
        this.dialogVisible = false;
        this.form.cancelremark = "";
        row == "sx" ? this.findkjapply() : this.myApplyData();
      }
    },
    // 结项
    jieXiangOpen(index, data) {
      this.$confirm("请确保没有未结项的订单，是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let url = "/api/hubeibusienss/submitbusienss";
          let params = {
            applyid: data[index].id,
          };
          let res = await myPostFetch(url, params);
          if (res.code == 700)
            return ElMessage({
              type: "error",
              message: res.msg,
            });
          ElMessage({
            type: "success",
            message: "提交成功",
          });
          this.findkjapply();
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "取消成功",
          });
        });
    },
    setTim() {
      setTimeout(() => {
        this.$router.go(0);
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .f1-left-top {
    @media only screen and (min-width: 1px) and (max-width: 1100px) {
      display: none;
    }
    width: 100%;
    overflow: hidden;
    ul {
      display: flex;
      justify-content: space-between;
      .f1-left-top-item {
        position: relative;
        width: 33%;
        height: 150px;
        @media only screen and (min-width: 1580px) and (max-width: 1950px) {
          height: 178px;
        }
        margin-left: -5px;
        h2 {
          position: absolute;
          top: 93px;
          left: 10%;
          @media only screen and (min-width: 1580px) and (max-width: 1950px) {
            left: 11%;
            top: 110px;
          }
          font-size: 18px;
          font-family: Source Han Sans SC;
          font-weight: 400;
        }
        .item3 {
          position: absolute;
          left: 9%;
          @media only screen and (min-width: 1580px) and (max-width: 1950px) {
            left: 10%;
          }
        }
        div {
          position: absolute;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          top: 13px;
          left: 150px;
          @media only screen and (min-width: 1580px) and (max-width: 1950px) {
            top: 25px;
            right: 170px;
          }
          height: 100px;

          h5 {
            margin-bottom: -6px;
            font-size: 15px;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #959595;
            span {
              font-size: 25px;
              font-family: Source Han Sans SC;
              font-weight: 400;
            }
          }
        }
      }
      .f1-left-top-item1 {
        background: url(@/assets/PC/项目管理+我的平台/组12.png) no-repeat;
        background-size: 100% 100%;
        h2 {
          color: #0a7be0;
        }
        h5 {
          span {
            color: #0a7be0;
          }
        }
      }
      .f1-left-top-item2 {
        background: url(@/assets/PC/项目管理+我的平台/组12拷贝.png) no-repeat;
        background-size: 100% 100%;
        h2 {
          color: #fe8a37;
        }
        h5 {
          span {
            color: #fe8a37;
          }
        }
      }
      .f1-left-top-item3 {
        background: url(@/assets/PC/项目管理+我的平台/组12拷贝2.png) no-repeat;
        background-size: 100% 95%;
        h2 {
          color: #0a7be0;
        }
        h5 {
          span {
            color: #0a7be0;
          }
        }
      }
    }
  }
  .f2 {
    overflow: hidden;
    flex: 1;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    background: #ffffff;
    margin-top: 5px;
    box-shadow: 0px 1px 10px 0px rgba(196, 196, 196, 0.15);
    // border-radius: 6px;
    padding: 20px 20px 5px 20px;
    .title {
      display: flex;
      align-items: center;
      width: 100%;
      height: 60px;
      // background-color: #f00;
      margin-bottom: 21px;
      border-bottom: 1px solid #e8e8e8;
      h3 {
        height: 32px;
        width: 75px;
        line-height: 28px;
        text-align: center;
        box-sizing: border-box;
        margin-right: 35px;
        font-size: 18px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #181818;

        cursor: pointer;
        &.active {
          box-sizing: border-box;
          border-bottom: 2px solid #0a7be0;
          color: #0a7be0;
        }
      }
    }
    .null {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: absolute;
      left: 50%;
      top: 67%;
      transform: translate(-163px, -160px);
      width: 326px;
      height: 300px;
      img {
        width: 326px;
        height: 212px;
      }
      h3 {
        font-size: 16px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #b3b3b3;
      }
    }
    // 搜索栏
    .user-search {
      display: flex;
      align-items: center;
      width: 100%;
      margin: 20px 0;
      div {
        margin-right: 30px;
        @media only screen and (min-width: 1px) and (max-width: 1100px) {
          margin-right: 10px;
        }
        span {
          font-size: 16px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #737373;
          margin-right: 10px;
          font-size: 16px;
        }
        .el-select {
          width: 300px;
          @media only screen and (min-width: 1px) and (max-width: 750px) {
            width: 130px;
          }
          @media only screen and (min-width: 751px) and (max-width: 1100px) {
            width: 200px;
          }
        }
      }
    }
    // 表格
    .table {
      box-sizing: border-box;
      width: 100%;
      background-color: #fff;
      height: 100%;
      // margin: 20px 0;
      padding-bottom: 53px;
      overflow: auto;
      border-bottom: 1px solid #e8e8e8;
      .span {
        display: inline-block;
        // width: 30px;
        height: 24px;
        font-size: 14px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        margin-right: 10px;
        color: #ccc;
        border-bottom: 1px solid #ccc;
        cursor: pointer;
      }
      .span1 {
        display: inline-block;
        // width: 30px;
        height: 24px;
        font-size: 14px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        margin-right: 5px;
        color: #0a7be0;
        border-bottom: 1px solid #0a7be0;
        cursor: pointer;
        margin-right: 10px;
      }
      .nactive {
        font-size: 14px;
        margin-right: 5px;
        color: #0a7be0;
        border-bottom: 1px solid #0a7be0;
      }
      .state-bar {
        span {
          font-size: 14px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #606266;
          margin-right: 10px;
        }
      }
    }
    .table::-webkit-scrollbar {
      width: 5px;
      height: 10px;
      background-color: #fff;
    }

    .table::-webkit-scrollbar-thumb {
      border-radius: 2px;
      background: rgba(36, 143, 172, 0.5);
    }
    // 分页器
    .pagination {
      position: absolute;
      bottom: 0px;
      right: 0px;
      display: flex;
      padding: 0px 30px 10px 10px;
      justify-content: right;
      span {
        font-size: 16px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #666666;
        margin-top: 2px;
      }
    }
  }
}
// 弹框
.dialog-center {
  box-sizing: border-box;
  padding: 0 5px;
  display: flex;
  width: 100%;
  .evaluate {
    box-sizing: border-box;
    padding: 0 30px;
    width: 100%;
    .evaluateList {
      display: flex;
      align-items: center;
      height: 45px;
    }
  }
}
.dialog-footer {
  display: flex;
  justify-content: space-evenly;
  width: 70%;
  margin: 0 auto;
  .dialog-footer-bnt {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 31px;
    color: #3f6ef2;
    border: 1px solid #3f6ef2;
    border-radius: 4px;
    background-color: #fff;
  }
  .btn2 {
    color: #fff;
    background-color: #3f6ef2;
  }
}
::v-deep(.lee-pager .active) {
  border: 0px solid #ddd;
  background: #0a7be0;
}
// 切换过渡
.slide-left-enter {
  opacity: 0;
  -webkit-transform: translate(100px, 0px);
  transform: translate(-100px, 0px);
}
.slide-left-enter-active {
  transition: all 0.5s linear;
}
.slide-left-leave-to {
  opacity: 0;
  -webkit-transform: translate(-100px, 0px);
  transform: translate(100px, 0px);
}
.slide-left-leave-active {
  transition: all 0.5s linear;
}
// 切换过渡
.fade-enter {
  opacity: 0;
}

.fade-leave {
  opacity: 1;
}

.fade-enter-active {
  transition: opacity 0.3s;
}

.fade-leave-active {
  opacity: 0;

  transition: opacity 0.3s;
}
/* 下拉选择器 */
::v-deep(.el-input__inner) {
  border-radius: 0px;
  padding: 0 15px;
  height: 40px;
  width: 300px;
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    width: 130px;
  }
  @media only screen and (min-width: 751px) and (max-width: 1100px) {
    width: 200px;
  }
  line-height: 35px !important;
}
/* 输入框样式  */
::v-deep(.demo-ruleForm .el-input__inner) {
  box-sizing: border-box;

  @media only screen and (min-width: 1920px) and (max-width: 2580px) {
    width: 360px;
  }
  @media only screen and (min-width: 1580px) and (max-width: 1920px) {
    width: 300px;
  }
  @media only screen and (min-width: 1250px) and (max-width: 1580px) {
    width: 210px;
  }
  @media only screen and (min-width: 1100px) and (max-width: 1250px) {
    width: 160px;
  }
  @media only screen and (min-width: 900px) and (max-width: 1100px) {
    width: 120px;
  }
  @media only screen and (min-width: 0px) and (max-width: 900px) {
    width: 80px;
  }
  height: 39px;
  font-size: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 0px;
  padding: 10px 10px;
  color: #606266;
  outline: 0;
  line-height: 35px !important;
}
::v-deep(.el-select) {
  width: 300px;
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    width: 130px;
  }
  @media only screen and (min-width: 751px) and (max-width: 1100px) {
    width: 200px;
  }
}
input::-webkit-input-placeholder {
  color: #aaa !important;
  font-size: 15px;
}
::v-deep(.el-table th.el-table__cell > .cell) {
  text-align: center;
}

::v-deep(.el-pagination) {
  font-size: 16px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #666666;
}
::v-deep(.el-pagination span) {
  border: 1px solid #ddd;
  background-color: #fff;
  padding: 0 10px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
}
::v-deep(.el-pagination.is-background .el-pager li) {
  width: 35px;
  border-radius: 0px;
  background: #fff;
  border: 1px solid #ddd;
}
.content {
  margin: 0 auto;
  position: relative;
  width: 960px;
  height: 100%;
  .f2 {
    height: 890px;
  }
}
::v-deep(.aaaa .el-dialog__body) {
  height: 50px;
}
::v-deep(.bbbb .el-dialog) {
  @media only screen and (min-width: 1450px) and (max-width: 1920px) {
    width: 40%;
  }
  @media only screen and (min-width: 1920px) and (max-width: 2580px) {
    --el-dialog-width: 35%;
    background: #f00;
  }
}
/* 分页器 */
::v-deep(.el-pagination.is-background .el-pager li) {
  border-radius: 0px;
}
::v-deep(.el-pagination.is-background .el-pager li.is-active) {
  background-color: #0a7be0;
  border: 0px solid #fff;
  font-weight: 400;
}
::v-deep(.el-pagination) {
  font-size: 16px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #666666;
}
::v-deep(.el-textarea__inner) {
  border-radius: 0px;
}
::v-deep(.el-icon svg) {
  width: 24px;
  height: 24px;
}
</style>
<style lang="scss">
/* 表格 */
.el-table {
  th.el-table__cell > .cell {
    font-size: 16px;
    font-weight: 400;
    @media only screen and (min-width: 1580px) and (max-width: 1950px) {
      font-size: 16px;
    }
  }
  .cell {
    font-size: 16px;
  }
}
.el-table::-webkit-scrollbar {
  height: 10px;
  background-color: #fff;
}

.el-table::-webkit-scrollbar-thumb {
  height: 10px;
  border-radius: 10px;
  width: 4px;
  background: rgba(36, 143, 172, 0.8);
}
.el-table tr {
  height: 40px;
}
.el-table .el-table thead {
  height: 40px;
}
.el-select-dropdown__item {
  font-size: 16px;
}
</style>
